window.addEventListener('load', function () {
    let tbody = document.querySelector('tbody')

    // 动态渲染
    function init() {
        axios({
            url: '/score/list'
        }).then(res => {
            let htmlStr = ''
            for (let key in res.data.data) {
                let data = res.data.data
                htmlStr += `<tr data-id = '${key}'>
                                <th scope="row">${key}</th>
                                <td>${data[key].name}</td>
                                <td class="score" data-batch='1'>${data[key].score[0]}</td>
                                <td class="score" data-batch='2'>${data[key].score[1]}</td>
                                <td class="score" data-batch='3'>${data[key].score[2]}</td>
                                <td class="score" data-batch='4'>${data[key].score[3]}</td>
                                <td class="score" data-batch='5'>${data[key].score[4]}</td>
                            </tr>`
            }
            tbody.innerHTML = htmlStr
        })
    }
    init()

    // 成绩的录入和修改
    tbody.addEventListener('click', function (e) {
        if (e.target.className == 'score') {
            let td = e.target
            // 判断是否有input输入框
            if (!td.querySelector('input')) {
                // 将td的内容存储起来
                let score = td.innerHTML
                // 将内容清空
                td.innerHTML = ''
                // 在当前被单击的td中添加一个input输入框
                let input = document.createElement('input')
                // 将添加的输入框填充到td里
                td.appendChild(input)
                // 将存储的内容填充到input输入框
                input.value = score
                // 设置样式
                input.style.textAlign = 'center'
                input.style.backgroundColor = 'transparent'
                input.style.border = 'none'
                input.style.outline = 'none'
                input.select() //让内容默认被选中
                // 为input设置失焦事件，将数据还原
                input.addEventListener('blur', function () {
                    td.innerHTML = score
                })
                // 实现数据的录入和修改
                input.addEventListener('keydown', function (e) {
                    if (e.key == 'Enter') {
                        // 发起ajax请求
                        axios({
                            url: '/score/entry',
                            method: 'post',
                            data: {
                                "stu_id": td.parentNode.dataset.id, //学员id
                                "batch": td.dataset.batch, //第几次
                                "score": input.value //成绩
                            }
                        }).then(res => {
                            if (res.data.code == 0) {
                                toastr.success(res.data.message)
                                td.innerHTML = ''
                                td.innerHTML = input.value
                                input.remove()
                            }
                        })
                    }
                })
            }

        }
    })

})